<style>
  .picImg {
    width: 40px;
    height: 40px;
  }
</style>
<template>
  <div class="app-container">
    <!--&lt;!&ndash; 查询和其他操作 &ndash;&gt;-->
    <div class="filter-container">
      <el-button class="filter-item" type="primary" icon="el-icon-edit"
      >导入文件
      </el-button>
      <el-button class="filter-item" type="primary" icon="el-icon-edit"
                 @click="handleAdd">新增
      </el-button>
    </div>

    <!-- 查询结果 -->
    <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row
              :header-cell-style="{background:'#B3D8FD',color: '#333'}">

      <!--<el-table-column fixed align="center" min-width="100" label="服务商ID" prop="ID"/>-->
      <el-table-column fixed align="center" min-width="100" label="服务商名称" prop="companyName"/>
      <el-table-column align="center" min-width="150" label="服务商全称" prop="fullName"/>
      <el-table-column align="center" min-width="100" label="所在省份" prop="province"/>
      <el-table-column align="center" min-width="100" label="所在城市" prop="city"/>
      <el-table-column align="center" min-width="200" label="详细地址" prop="address"/>
      <el-table-column align="center" min-width="100" label="联系人" prop="linkMan"/>
      <el-table-column align="center" min-width="110" label="联系人电话" prop="linkPhone"/>
      <el-table-column align="center" min-width="110" label="手机号" prop="linkMobile"/>
      <el-table-column align="center" min-width="200" label="电子邮箱" prop="email"/>
      <el-table-column align="center" min-width="100" label="登录主账户" prop="userName"/>
      <el-table-column align="center" min-width="170" label="创建时间" prop="timeAdd"/>
      <el-table-column fixed="right" align="center" label="操作" width="250" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="success" size="mini"
                     @click="handleCheck(scope.row)">账户
          </el-button>
          <el-button type="primary" size="mini"
                     @click="handleEdit(scope.row)">修改
          </el-button>
          <el-button type="danger" size="mini"
                     @click="doDelete(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
                @pagination="getList"/>
    <!-- 账户列表对话框 -->
    <el-dialog :visible.sync="acclistDialogVisible" title="账户列表"  width="900px">
      <div class="filter-container">
        <el-button class="filter-item" type="primary" icon="el-icon-edit"
                   @click="handleChildAdd">新增
        </el-button>
      </div>
      <el-table v-loading="acclistLoading" :data="acclist" element-loading-text="正在查询中。。。" border fit highlight-current-row
                :header-cell-style="{background:'#B3D8FD'}">
        <!--<el-table-column fixed align="center" min-width="100" label="公司ID" prop="ID"/>-->
        <el-table-column align="center" min-width="100" label="银行代码" prop="bankCode"/>
        <el-table-column align="center" min-width="150" label="联行号" prop="interBankNo"/>
        <el-table-column align="center" min-width="150" label="账户号" prop="account"/>
        <el-table-column align="center" min-width="150" label="账户名称" prop="accName"/>
        <el-table-column align="center" label="操作" width="100" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button type="danger" size="mini"
                       @click="doChildDelete(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
        <!--增加指定服务商账户对话框-->
        <el-dialog :visible.sync="acclistDialogChildVisible" title="新增服务商账户" width="50%" append-to-body>
          <el-form ref="editChildForm" :rules="editChildFormRules" :model="editChildForm" status-icon label-position="right"
                   label-width="130px" style="width: 80%">
            <el-form-item label="银行代码" prop="bankCode">
              <el-input v-model="editChildForm.bankCode" placeholder="银行代码"/>
            </el-form-item>
            <el-form-item label="联行号" prop="interBankNo">
              <el-input v-model="editChildForm.interBankNo" auto-complete="off" placeholder="联行号"/>
            </el-form-item>
            <el-form-item label="账户号" prop="account">
              <el-input v-model="editChildForm.account" placeholder="账户号"/>
            </el-form-item>
            <el-form-item label="账户名称">
              <el-input v-model="editChildForm.accName" placeholder="账户名称"/>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="acclistDialogChildVisible = false">取消</el-button>
            <el-button type="primary" @click="doChildAdd">确定</el-button>
          </div>
        </el-dialog>
      </el-table>
    </el-dialog>
    <!-- 新增服务商对话框 -->
    <el-dialog :visible.sync="editDialogVisible" title="新增服务商" width="900px">
      <el-form ref="editForm" :rules="editFormRules" :model="editForm" status-icon label-position="right"
               label-width="130px" style="padding-right: 20px;">
        <div style="display: flex">
          <div style="flex: 1; margin-right: 40px">
            <el-form-item label="服务商名称" prop="companyName">
              <el-input v-model="editForm.companyName" placeholder="服务商名称"/>
            </el-form-item>
            <el-form-item label="服务商全称">
              <el-input v-model="editForm.fullName" auto-complete="off" placeholder="服务商全称"/>
            </el-form-item>
            <el-form-item label="省城市">
              <el-cascader
                :options="cities"
                v-model="editForm.provinceAndCity"
                :props="{ expandTrigger: 'hover',value:'label' }"
              ></el-cascader>
              <!--<el-input v-model="editForm.districtCode" auto-complete="off"/>-->
            </el-form-item>
            <el-form-item label="详细地址">
              <el-input v-model="editForm.address" placeholder="详细地址"/>
            </el-form-item>
            <el-form-item label="联系人" prop="linkMan">
              <el-input v-model="editForm.linkMan" placeholder="联系人"/>
            </el-form-item>
          </div>
          <div style="flex: 1;">
            <el-form-item label="联系人电话">
              <el-input v-model="editForm.linkPhone" placeholder="联系人电话"/>
            </el-form-item>
            <el-form-item label="手机号" prop="linkMobile">
              <el-input v-model="editForm.linkMobile" placeholder="手机号"/>
            </el-form-item>
            <el-form-item label="电子邮箱">
              <el-input v-model="editForm.email" placeholder="电子邮箱"/>
            </el-form-item>
            <el-form-item v-if="dialogStatus == 'create'" label="登录用户" prop="userName">
              <el-input v-model="editForm.userName" placeholder="登录用户"/>
            </el-form-item>
            <el-form-item v-if="dialogStatus == 'create'" label="登录密码" prop="password">
              <el-input v-model="editForm.password" placeholder="登录密码"/>
            </el-form-item>
          </div>
        </div>
        <!--<el-form-item label="公司收付款账户列表">
          <el-checkbox-group v-model="editForm.acclist">
            <el-checkbox label="开户银行" name="acclist"></el-checkbox>
            <el-checkbox label="银行联行号" name="acclist"></el-checkbox>
            <el-checkbox label="银行账号" name="acclist"></el-checkbox>
            <el-checkbox label="账号名称" name="acclist"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="doEdit">{{dialogStatus == 'create' ? '新增' : '确定'}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {doGet, doPost} from '@/api'
  import {cities} from '@/utils/base'
  import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
  import checkPermission from '@/utils/permission' // 权限判断函数

  export default {
    name: 'insurservice',
    components: {Pagination},
    filters: {
      // accTyped: function(val){
      //     return function (val){
      //         return {0: "服务费账户",1: "代付账户"}[val] || "未知"
      //     }
      // },
    },
    data() {
      return {
        list: [],
        total: 0,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 20,
        },
        dialogStatus: 'create',
        editForm: {
          companyName: undefined,
          fullName: undefined,
          address: undefined,
          linkMan: undefined,
          linkPhone: undefined,
          linkMobile: undefined,
          provinceAndCity: undefined,
          email: undefined,
          userName: undefined,
          password: undefined,
        },
        editFormRules: {
          companyName: [{required: true, message: '公司名称不允许为空', trigger: 'blur'}],
          linkMan: [{required: true, message: '联系人不允许为空', trigger: 'blur'}],
          linkMobile: [{required: true, message: '手机号不允许为空', trigger: 'blur'}],
          userName: [{required: true, message: '登录用户名不允许为空', trigger: 'blur'}],
          password: [{required: true, message: '登录密码不允许为空', trigger: 'blur'}]
        },
        editDialogVisible: false,
        cities: cities,
        acclistDialogVisible: false, // 账户列表对话框显示标志
        acclistLoading: false, // 查看账户列表loading标志
        acclist: [], // 账户列表数据
        acclistDialogChildVisible: false, // 增加服务商账户对话框显示标志
        editChildForm: {
          bankCode: undefined,
          interBankNo: undefined,
          account: undefined,
          accName: undefined
        },
        editChildFormRules: {
          bankCode: [{required: true, message: '银行代码不允许为空', trigger: 'blur'}],
          interBankNo: [{required: true, message: '联行号不允许为空', trigger: 'blur'}],
          account: [{required: true, message: '账户号不允许为空', trigger: 'blur'}],
        },
        id: undefined
      }
    },
    created() {
      this.getList()
    },
    methods: {
      checkPermission,
      // 获取服务商列表
      getList() {
        this.listLoading = true
        doGet('insurservice.html?op=list', this.listQuery).then(response => {
          this.list = response.rows
          this.total = response.rows.length
          this.listLoading = false
        }).catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
      },

      // 获取账户列表
      getAccList(id) {
        this.acclistLoading = true
        doGet('insurservice.html?op=acclist', {id}).then(response => {
          this.acclist = response.rows
          this.acclistLoading = false
        }).catch(() => {
          this.acclist = []
          this.acclistLoading = false
        })
      },

      // 查看服务商账户
      handleCheck(row) {
        this.acclist = []
        this.acclistDialogVisible = true
        this.id = row.ID
        this.getAccList(row.ID)
      },

      // 弹出新增服务商对话框
      handleAdd() {
        Object.keys(this.editForm).forEach(item => {
          this.editForm[item] = undefined
        })
        this.editDialogVisible = true
        this.dialogStatus = "create"
        this.$nextTick(() => {
          this.$refs['editForm'].clearValidate()
        })
      },

      // 弹出修改服务商信息对话框
      handleEdit(row) {
        this.editForm = Object.assign({}, row);
        this.editForm.provinceAndCity = [row.province, row.city]
        this.editIndex = this.list.indexOf(row);
        this.dialogStatus = "update"
        this.editDialogVisible = true
        this.$nextTick(() => {
          this.$refs['editForm'].clearValidate()
        })
      },

      // 提交服务商信息
      doEdit() {
        this.$refs['editForm'].validate(valid => {
          if (valid) {
            let sendData = {
              ...this.editForm,
              province: this.editForm.provinceAndCity ? this.editForm.provinceAndCity[0] : undefined,
              city: this.editForm.provinceAndCity ?  this.editForm.provinceAndCity[1] : undefined
            }
            doGet(`insurservice.html?op=${this.dialogStatus == 'create' ? 'add' : 'chg'}`, sendData)
              .then(response => {
                this.getList()
                this.editDialogVisible = false
                this.$notify.success({
                  title: '成功',
                  message: this.dialogStatus == 'create' ? '添加服务商成功' : '修改服务商信息成功'
                })
              })
              .catch(response => {
                this.$notify.error({
                  title: '失败',
                  message: response.message
                })
              })
          }
        })
      },

      // 删除服务商
      doDelete(row) {
        doGet("insurservice.html?op=del", {...row, id: row.ID})
          .then(response => {
            this.$notify.success({
              title: '成功',
              message: '删除服务商成功'
            })
            const index = this.list.indexOf(row)
            this.list.splice(index, 1)
          })
          .catch(response => {
            this.$notify.error({
              title: '失败',
              message: response.message
            })
          })
      },

      // 弹出新增服务商账户对话框
      handleChildAdd() {
        Object.keys(this.editChildForm).forEach(item => {
          this.editChildForm[item] = undefined
        })
        this.acclistDialogChildVisible = true
        this.$nextTick(() => {
          this.$refs['editChildForm'].clearValidate()
        })
      },

      // 提交新新增服务商账户信息
      doChildAdd() {
        this.$refs['editChildForm'].validate(valid => {
          if (valid) {
            doGet('insurservice.html?op=accadd', {id: this.id, ...this.editChildForm})
              .then(response => {
                this.getAccList(this.id)
                this.acclistDialogChildVisible = false
                this.$notify.success({
                  title: '成功',
                  message: '添加服务商账户成功'
                })
              })
              .catch(response => {
                this.acclistDialogChildVisible = false
                this.$notify.error({
                  title: '失败',
                  message: response.message
                })
              })
          }
        })
      },

      // 删除服务商账户
      doChildDelete(row) {
        doGet("insurservice.html?op=accdel", row)
          .then(response => {
            this.$notify.success({
              title: '成功',
              message: '删除服务商账户成功'
            })
            const index = this.acclist.indexOf(row)
            this.acclist.splice(index, 1)
          })
          .catch(response => {
            this.$notify.error({
              title: '失败',
              message: response.message
            })
          })
      },
    }
  }
</script>
